<template>
    <div class="all">
      <div class="d2">
        <div class="dd1">
          设备编号:&nbsp;&nbsp;&nbsp;<el-input
          class="el1"
            size="mini"
            v-model="query.facModel"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dd2">
          区域:&nbsp;&nbsp;&nbsp;<el-select
            size="mini"
            v-model="query.areaId"
            placeholder="请选择"
          >
            <el-option
              v-for="area in options"
              :key="area.areaId"
              :label="area.areaName"
              :value="area.areaId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dd3">
          <el-row>
            <el-button type="primary" round size="small" @click="load()"
              >查询</el-button
            >
            <el-button type="info" round size="small" @click="loadNew()"
              >重置</el-button
            >
          </el-row>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="facModel" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="lpId" label="灯杆编号" width="100">
          </el-table-column>
          <el-table-column prop="areaName" label="地区" width="100">
          </el-table-column>
          <el-table-column prop="facDate" label="生产日期" width="130">
          </el-table-column>
          <el-table-column prop="facSeller" label="生产厂家" width="130">
          </el-table-column>
          <el-table-column prop="facStateName" label="目前状态" width="100">
          </el-table-column>
          <el-table-column prop="frStartTime" label="开启时间" width="130">
          </el-table-column>
          <el-table-column prop="frEndTime" label="关闭时间" width="130">
          </el-table-column>
          <el-table-column label="操作" prop="facId">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle
              @click="updat(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="del(scope.row.facId)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 修改dialog========================= -->
  <el-dialog title="修改广播设备" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="设备编号" :label-width="formLabelWidth">
        <el-input v-model="form.facModel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家" :label-width="formLabelWidth">
        <el-input v-model="form.facSeller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="生产日期" :label-width="formLabelWidth">
        <!-- <el-input v-model="form.facDate" autocomplete="off"></el-input> -->
        <el-date-picker
        v-model="form.facDate"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      </el-form-item>
      <el-form-item label="目前状态" :label-width="formLabelWidth">
        <el-select v-model="form.facStateId" placeholder="请选择状态">
          <el-option
              v-for="sta in stateList"
              :key="sta.facstateId"
              :label="sta.facstateName"
              :value="sta.facstateId"
            >
            </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="quxiao">取 消</el-button>
      <el-button type="primary" @click="tijiao">确 定</el-button>
    </div>
  </el-dialog>
  
  
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
    <script>
  export default {
    data() {
      return {
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
        tableData: [],
        query: {
          currentPage: 1, //代表当前页
          pageSize: 6, //代表每页显示多少条数据
          areaId: "",
          facModel: "",
        },
        page: {
          pageSizes: [6, 12, 30, 60, 120], //下拉列表中的数组
          total: 0, //一共有多少条数据
        },
        options: [],
        form:{},
        formLabelWidth: '120px',
        dialogFormVisible:false,
        stateList:[],
      };
    },
    methods: {
      tijiao(){
          this.$axios.put("fac/updt",this.form).then(res=>{
              this.form={};
              this.dialogFormVisible=false;
              this.$message.success("修改成功");
          });
      },
      quxiao(){
          this.dialogFormVisible = false;
          this.form=[];
      },
      updat(row){
          this.form = row;
          this.dialogFormVisible = true;
      },
      del(id){
          this.$axios.delete("fac/"+id).then((res) => {
              this.$message.success("删除成功");
              this.load();
          });
      },
      load() {
        this.$axios.post("fac/queryg", this.query).then((res) => {
          this.tableData = res.data.data.gList;
          this.page.total = res.data.data.total;
        });
      },
      loadNew() {
        this.query.areaId = "";
        this.query.facModel = "";
        this.load();
      },
      loadArea() {
        this.$axios.get("area").then((res) => {
          this.options = res.data.data.areaList;
        });
      },
      loadStates() {
        this.$axios.get("FStates").then((res) => {
          this.stateList = res.data.data.states;
        });
      },
      handleSizeChange(val) {
        //当每页数据改变时
        this.query.pageSize = val;
        this.load();
      },
      handleCurrentChange(val) {
        //当点击页码时
        this.query.currentPage = val;
        this.load();
      },
    },
    mounted() {
      this.load();
      this.loadArea();
      this.loadStates();
    },
  };
  </script>
    <style scoped>
  .d2 {
    width: auto;
    height: 35px;
  }
  .dd1 {
    width: 300px;
    height: 33px;
    font-size: 14px;
    float: left;
  }
  .dd2 {
    width: 300px;
    height: 33px;
    font-size: 14px;
    float: left;
  }
  .dd3 {
    width: 250px;
    height: 33px;
    font-size: 14px;
    float: right;
  }
  .el1 {
    width: 100px;
    height: 33px;
  }
  </style>